<template>
  <div class="app-container">
    <div class="mapDiv">
      <occurProbability v-if="open" :drawTool="drawTool" :clearTool="clearTool" @drawResult="drawResult"
        :roleLeve="roleLeve" :provinceName="provinceName" :cityName="cityName" :geomText="geomText"
        :landFormSql="landFormSql"
        :countyName="countyName" @openTableLisst="openTableLisst" @mapLoading="mapLoading"
        @showHideQueryDiv="showHideQueryDiv" @showHideImportModel="showHideImportModel" @getLegendHtml="getLegendHtml"
        @showHideImportData="showHideImportData" @showHideUploadRecords="showHideUploadRecords"
         :queryOpen="queryOpen" @opclose="opclose" @clearParams="clearParams"
        />
        <!-- <div class="new-uploadDiv">
        <el-button type="primary" @click="selectLayers">导出模板</el-button>
        <el-button type="primary" @click="uploadMb">导入数据</el-button>
      </div> -->
      <!--查询面板-->
      <el-card v-if="showHideQueryDivBool" class="new-queryDiv">
        <div class="new-queryDiv-inner">
          <el-form ref="selectForm" :model="queryParams" label-position="right" label-width="82px">
            <el-form-item label="省" label-width="80px">
              <el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" @clear='clear1' clearable
                value-key="name">
                <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" label-width="80px">
              <el-select v-model="queryParams.city" placeholder="请选择市" @change="chooseCity" @clear='clear2' clearable
                value-key="name">
                <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区县" label-width="80px">
              <el-select v-model="queryParams.county" placeholder="请选择区县" @change="chooseCounty" @clear='clear3' clearable
                value-key="name">
                <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据类型" label-width="80px">
              <el-radio-group v-model="queryParams.type">
                <el-radio :label="1">烈度</el-radio>
                <el-radio :label="0">pga</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <el-row justify="space-around">
            <el-button @click="queryClick" type="primary">查询图层</el-button>
            <el-button @click="queryTableClick" type="primary">查询列表</el-button>
            <el-button plain @click="closeSelect">关闭</el-button>
          </el-row>
        </div>
      </el-card>
      <el-card v-if="selectButton" class="new-uploadDiv1">
        <el-radio-group v-model="radio2">
          <el-radio :label="1">IM（烈度）</el-radio>
          <el-radio :label="0">IM（PGA）</el-radio>
        </el-radio-group>
        <el-radio-group v-model="radio">
          <el-radio :label="0">按行政区导出</el-radio>
          <el-radio :label="1">按绘制范围导出</el-radio>
        </el-radio-group>
        <div v-if="radio == '0'" style="margin: 10px 0 20px;">
          <el-button type="text">行政区选择：</el-button>
          <AreaCascader v-if="roleLeve == 'qh_gj_role'" @getAreaSelect="getAreaSelect" style="width: 260px" />
          <AreaCascader1 v-else :provinceId="provinceId" :cityId="cityId" :countyId="countyId"
            @getAreaSelect="getAreaSelect" style="width: 260px" />
        </div>
        <el-row justify="space-between" v-if="radio == '1'" style="margin: 20px 0 10px">
          <el-button type="primary" @click="drawPolygon">开始绘制</el-button>
          <el-button type="primary" @click="clearPolygon">清除绘制</el-button>
          <p>
            <el-input v-model="input" type="textarea" :autosize="{ minRows: 3, maxRows: 12 }" resize="none" disabled
              placeholder="绘制的空间范围" style="width:260px" />
          </p>
        </el-row>
        <el-row justify="space-around">
          <el-button type="primary" @click="startReport">开始导出</el-button>
          <el-button plain style="margin-left:110px" @click="closeSelect">关闭</el-button>
        </el-row>
      </el-card>
      <el-card v-if="uploadButton" class="new-uploadDiv1">
        <el-radio-group v-model="radio3">
          <el-radio :label="1">IM（烈度）</el-radio>
          <el-radio :label="0">IM（PGA）</el-radio>
        </el-radio-group>
        <div style="margin-top: 15px">
          <input type="file" @change="uploadFileChange" style="width: 70px;" id="excel-button-selectfile"
            multiple="multiple" accept=".xls,.xlsx" />
          <!-- <span style="margin-left: 22px;">
            T年：<el-input-number v-model="year" :min="1" :precision="0" />
          </span> -->
        </div>
        <div style="margin-top:10px">
          <el-input v-model="textarea" disabled :rows="2" type="textarea" placeholder="请选择Excel文件" />
        </div>
        <div style="margin-top:10px">
          <input type="file" @change="uploadFileChange1" style="width: 70px;" id="spaceData-button-selectfile"
            multiple="multiple" accept=".shp,.dbf,.prj,.sbn,.sbx,.shp.xml,.shx,.cpg" />
        </div>
        <div style="margin:10px 0">
          <el-input type="textarea" :rows="5" placeholder="导入多个文件时，文件名须相同" v-model="textarea1" disabled></el-input>
        </div>
        <el-row justify="space-around">
          <el-button type="primary" @click="startUpload">开始导入</el-button>
          <el-button plain style="margin-left:135px" @click="closeSelect">关闭</el-button>
        </el-row>
      </el-card>
      <el-card v-if="showHideUploadRecordsBool" class="new-queryDiv">
        <div class="new-queryDiv-inner">
          <el-form ref="selectForm" :model="queryParams" label-position="right" label-width="82px">
            <el-form-item label="上传人" label-width="80px">
              <el-input v-model="selectQueryParams.userName" style="width: 240px" placeholder="请输入上传人" />
            </el-form-item>
          </el-form>
          <el-row justify="space-around">
            <el-button @click="queryUploadPerson" type="primary">查询列表</el-button>
            <el-button plain @click="closeSelect">关闭</el-button>
          </el-row>
        </div>
      </el-card>
      <el-card v-if="tabltTool || uploadPersonBool" class="new-queryResultDiv" :class="showSelectId ? 'min-Table' : 'max-Table'">
        <div class="new-queryTableBtn">
          <el-button @click="closeTableDiv" plain>关闭</el-button>
        </div>
        <div v-if="tabltTool" class="new-queryTableDiv">
          <el-form ref="formTable" :model="tableDataForm" style="height:100%;">
            <el-table ref="tableRef" height="100%" :data="tableDataForm.tableData" stripe
              row-key="id" class="headborder-table">
              <el-table-column label="公里格网ID号" align="center" prop="id" />
              <el-table-column label="经度" align="center" prop="longitude" />
              <el-table-column label="纬度" align="center" prop="latitude" />
              <!-- -->
              <el-table-column v-if="dataType == 1" label="发生概率" align="center">
                  <el-table-column label="6度" align="center" prop="grIdList[0].fimValue"/>
                  <el-table-column label="7度" align="center" prop="grIdList[1].fimValue" />
                  <el-table-column label="8度" align="center" prop="grIdList[2].fimValue" />
                  <el-table-column label="9度" align="center" prop="grIdList[3].fimValue" />
                  <el-table-column label="10度" align="center" prop="grIdList[4].fimValue" />
              </el-table-column>
              <el-table-column v-else label="发生概率" align="center">
                <el-table-column v-for="(item) in grIdListColumn" :key="item.label" :label="item.label" :prop="item.prop" align="center"></el-table-column>
              </el-table-column>
              <el-table-column label="创建人/修改人" align="center" prop="userName" />
              <el-table-column label="创建时间/修改时间" align="center" prop="time" />
              <el-table-column label="危险性曲线" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div v-if="uploadPersonBool" class="new-queryTableDiv">
          <el-form ref="formTable" :model="tableDataForm" style="height:100%;">
            <el-table ref="tableRef" height="100%" :data="tableDataForm.tableData" stripe
              row-key="id" class="headborder-table">
              <el-table-column label="序号" align="center" type="index" />
              <el-table-column label="数据类型" align="center" prop="type" />
              <el-table-column label="上传人" align="center" prop="createUserName" />
              <el-table-column label="上传时间" align="center" prop="createTime" />
              <el-table-column label="数据范围" align="center" prop="region" />
              <el-table-column label="操作" width="120">
                <template #default="scope">
                  <el-button link type="primary" size="small" @click="uploadFileZip(scope.row)">下载文件</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
        <div class="new-queryTableDiv-page">
          <el-pagination v-if="totalCount > 0" v-model:current-page="currentPage" background
            v-model:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
            @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>
      </el-card>
      <div v-if="tabltToolBool" style="position: absolute;bottom: 1%;right: 1%;width: 36%;z-index: 20;">
        <echarsTable :echartsListData="echartsListData" :titleName="titleName" :fileObj="fileObj"
          @closeTableDiv="closeEcharsTable"
        />
      </div>
      <div v-if="showHideLegendDivBool" class="layerMap-legend">
        <!--滚动条-->
        <el-scrollbar max-height="500px">
          <p>图例</p>
          <div style="display:flex;align-items: center"><span v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml"></span><span style="margin-left: 25px;">烈度</span></div>
          <!--<div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml"></div>-->
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script setup name="occurProbability">
import occurProbability from '@/map/basicDataManage/occurProbability/indexMap.vue'
import AreaCascader from '@/views/buildingRiskZoning/singleRiskZonation/components/areaCascader.vue'
import AreaCascader1 from './areaCascader.vue'
import { importExcel, getByKilometerGridId,getByRegionId,page,exportFile,uploadRecords } from '@/api/basicDataManage/occurProbability'
import echarsTable from '@/views/basicDataManage/dzwxxData/occur/echarsTable.vue'
import { upLoadFile } from "@/api/system/attachFile";
import { download } from "@/utils/request";
import { getProvince, getChildArea } from "@/api/system/division";
import axios from 'axios'
import { getToken } from "@/utils/auth"
import { ref } from 'vue';

const { proxy } = getCurrentInstance();
const data = reactive({
  queryParams: {
    province: '',
    city: '',
    // dataRangeProvince: '全国',
    county: '',
    page: 1,
    size: 10,
    type: 1,
    // dataRangeArea: '',
    // dataRangeText: '',//版本范围当前选择内容
    // dataLayerText: '',//数据图层当前选择内容
    // dataTypeCodeSearchText: '',//搜索版本号输入框文本
  },
  tableDataForm: {
    tableData: []
  },
  selectQueryParams: {
    userName: '',
    page: 1,
    size: 10,
  }
})
const { queryParams,tableDataForm,selectQueryParams } = toRefs(data);
const year = ref('')
const tableData = ref([])
const radio = ref(0)
const radio2 = ref(1)
const radio3 = ref(1)
const input = ref('')
const showHideLegendDivBool = ref(false);//是否显示图例
const selectButton = ref(false)
const uploadButton = ref(false)
const xzqData = ref([])
const showSelectId = ref(true)
//获取选择的行政区划列表
const getAreaSelect = (obj) => {
  if (obj) {
    xzqData.value = obj.bouas;
  }
}
const realSrc = computed(() => {
  let name = ''
  if (tableData.value.length != 0) {
    if (tableData.value[0].pictureType == '0') {
      name = 'PGA'
    } else {
      name = '烈度'
    }
  }
  return name;
});

const mapLoading = (msg) => {//地图查询loading
  if (msg != null) {
    proxy.$modal.loading(msg);
  } else {
    proxy.$modal.closeLoading();
  }
}
function closeTableDiv() {
  tabltTool.value = false
  uploadPersonBool.value = false
}
const tabltTool = ref(false)
const echartsListData = ref([])
const titleName = ref('')
const fileObj = ref({})
const openTableLisst = (list) => {
  tableData.value = list
  if (tabltTool.value) {
    tabltTool.value = false
    proxy.$modal.closeLoading();
  } else {
    echartsListData.value = []
    getByKilometerGridId({ kilometerGridId: list[0].ID, type: radio2.value }).then(res => {
      if (res.data.data.length != 0) {
        fileObj.value = res.data.fileId
        tableData.value = res.data.data
        let list  = res.data.data
        let xAxis = []
        let yAxis = []
        for (let i = 0; i < list.length; i++) {
          xAxis.push(list[i].fimValue)
          yAxis.push(list[0].pictureType == '0'?list[i].imValue+'g':(i+6)+'度')
        }
        titleName.value = list[0].pictureType == '0' ? 'PGA' : '烈度'
        echartsListData.value.push(xAxis)
        echartsListData.value.push(yAxis)
        tabltTool.value = true
      } else {
        alertMsg('未查询到数据！');
      }
      proxy.$modal.closeLoading();
    }).catch()
  }
}

const layerShowHideArray = ref([]);//图层是否显示数组
const getLegendHtml = (obj)=> {
  console.log("getLegendHtml_zhangping");
  console.log(obj);

  let showHideArray = [];
  showHideArray.push({ code: "00", name: "烈度", show:true,legendHtml:"" });
  layerShowHideArray.value = showHideArray;

  if (obj != null) {
    layerShowHideArray.value = [{
      name: "烈度",
      show: obj.show,
      legendHtml: obj.legendHtml
    }];
    showHideLegendDivBool.value = true;// 打开图例面板
  }
}

const tabltToolBool = ref(false)
function handleClick(val) {
  fileObj.value = {
    attachName: '测试',
    attachId: '1'
  }
  let list = val.grIdList
  let xAxis = []
  let yAxis = []
  for (let i = 0; i < list.length; i++) {
    xAxis.push(list[i].fimValue)
    yAxis.push(val.dataType=='1'?(i+6)+'度':list[i].imValue+'g')
  }
  titleName.value = val.dataType == '0' ? 'PGA' : '烈度'
  echartsListData.value.push(xAxis)
  echartsListData.value.push(yAxis)
  tabltToolBool.value = true
}
function getDataList(val) {
  let list = val.grIdList
  return list
}
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 86400000
})
const downloadLoadingInstance = ref(null)
function uploadFileZip(val) {
  proxy.$modal.loading()
  let params = {
    ids: val.fileIds
  }
  axios({
    method: "post",
    url: import.meta.env.VITE_APP_BASE_API + '/psHazard/export',     //接口地址
    params: params,   // 你的传参
    responseType: "blob",    // 指定获取数据的类型为blob
  }).then(
    function (response) {
      var fileName = decodeURI(response.headers["content-disposition"].split("=")[1])
      debugger
      const data = response.data;
      if (!data) {
        proxy.$modal.msgWarning('文件下载失败');
        return
      }
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(new Blob([data], { type: 'application/zip' }), fileName)
      } else {
        const url = window.URL.createObjectURL(new Blob([data], { type: 'application/zip' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
        proxy.$modal.closeLoading()
      }
    }
  ).catch(function (err) {
    proxy.$modal.closeLoading()
  })
}
function closeEcharsTable() {
  echartsListData.value = []
  tabltToolBool.value = false
}
const grIdListColumn = ref([])
//查询列表数据
function queryTableClick() {
  tableDataForm.value.tableData = []
  queryParams.value.page = 1
  queryParams.value.size = 10,
  currentPage.value = 1
  pageSize.value = 10
  page(queryParams.value).then(res => {
    debugger
    if(res.data.rows.length != 0) {
      tableDataForm.value.tableData = res.data.rows
      dataType.value = res.data.rows[0].dataType
      totalCount.value = res.data.total
      grIdListColumn.value = tableDataForm.value.tableData[0].grIdList.map((item, index) => {
        return {
          label: item.imValue+'g',
          prop:'grIdListfimValue'+index
        }
      })
      tableDataForm.value.tableData.map(item=> {
        item.grIdList.map((iteml,index1)=>{
          item['grIdListfimValue'+index1]= iteml.fimValue
        })
      })
      console.log(grIdListColumn,tableDataForm.value.tableData,'====')
      tabltTool.value = true
    }else{
      proxy.$modal.msgWarning('未查询到数据!');
    }
  }).catch(erro => {

  })
}
function clear1() {
  queryParams.value.province = ''
}
function clear2() {
  queryParams.value.city = ''
}
function clear3() {
  queryParams.value.county = ''
}
const landFormSql = ref({})
function queryClick() {
  landFormSql.value = {
    province: queryParams.value.province,
    city: queryParams.value.city,
    county: queryParams.value.county,
    type: queryParams.value.type
  }
}
function clearParams() {
  landFormSql.value = {}
}
const queryOpen = ref(false)
function closeSelect() {
  showHideQueryDivBool.value = false;
  uploadButton.value = false
  selectButton.value = false
  showHideUploadRecordsBool.value = false
  queryOpen.value = true
  input.value = ''
  textarea.value = ''
  textarea1.value = ''
  year.value = ''
  queryParams.value.province = ''
  queryParams.value.city = ''
  queryParams.value.county = ''
  queryParams.value.page = 1
  queryParams.value.size = 10
  landFormSql.value = {}
  //showHideLegendDivBool.value = false;//关闭图例
}
function opclose(bool) {
  queryOpen.value = bool
}
function showHideImportModel(bool) {
  uploadButton.value = false
  showHideQueryDivBool.value = false
  showHideUploadRecordsBool.value = false
  if (bool) {
    selectButton.value = true
  } else {
    selectButton.value = false
  }
}
function showHideImportData(bool) {
  selectButton.value = false
  showHideQueryDivBool.value = false
  showHideUploadRecordsBool.value = false
  if (bool) {
    uploadButton.value = true
  } else {
    uploadButton.value = false
  }
}
const showHideQueryDivBool = ref(false)
const showHideQueryDiv = (bool) => {//显示|隐藏查询面板
  selectButton.value = false
  uploadButton.value = false
  showHideUploadRecordsBool.value = false
  showHideQueryDivBool.value = bool;
}
const showHideUploadRecordsBool = ref(false)
const showHideUploadRecords = (bool) => {
  selectButton.value = false
  uploadButton.value = false
  showHideQueryDivBool.value = false;
  showHideUploadRecordsBool.value = bool
}
const uploadPersonBool = ref(false)
function queryUploadPerson() {
  selectQueryParams.value.page = 1
  selectQueryParams.value.size = 10,
  currentPage.value = 1
  pageSize.value = 10
  uploadRecords(selectQueryParams.value).then(res => {
    tableDataForm.value.tableData = res.data.rows
    totalCount.value = res.data.total
    uploadPersonBool.value = true
  }).catch(erro => {

  })
}
const drawTool = ref(false)
function drawPolygon() {
  drawTool.value = true
  clearTool.value = false
}
const drawResult = (result) => {
  input.value = result
  drawTool.value = false
}
const clearTool = ref(false)
function clearPolygon() {
  input.value = ''
  clearTool.value = true
}
function startReport() {
  if (radio.value == 0) {
    if (xzqData.value.length == 0) {
      alertMsg('请选择行政区');
      return
    }
  } else {
    if (input.value == '') {
      alertMsg('请绘制范围');
      return
    }
  }
  proxy.$modal.loading()
  let params = {
    sheetType: radio2.value,
    region: radio.value,
    rangeValue: input.value,
    regionValue: xzqData.value
  }
  axios({
    method: "post",
    url: import.meta.env.VITE_APP_BASE_API + '/psHazard/exportExcel',     //接口地址
    data: params,   // 你的传参
    headers: { 'token': 'token ' + getToken() },
    responseType: "blob",    // 指定获取数据的类型为blob
  }).then(
    function (response) {
      var fileName = decodeURI(response.headers["content-disposition"].split("=")[1])
      const data = response.data;
      if (!data) {
        proxy.$modal.msgWarning('文件下载失败');
        return
      }
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName)
      } else {
        const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(url) // 释放掉blob对象
        proxy.$modal.closeLoading()
      }
    }
  ).catch(function (err) {
    proxy.$modal.closeLoading()
  })
}
const excelMinList = ref([]);//要上传的文件的后缀名数组
const textarea = ref('')
const textarea1 = ref('')
function uploadFileChange() {
  let uploadinputFiles = document.getElementById("excel-button-selectfile").files;
  excelMinList.value = [];
  let text = "";
  for (let i = 0; i < uploadinputFiles.length; i++) {
    text += uploadinputFiles[i].name;
    let type = text.split('.')[1]
    // 获取这个文件的后缀名
    excelMinList.value.push(type);
  }
  textarea.value = text;
}
const minList = ref('')
const nameList = ref('')
function uploadFileChange1() {
  let uploadinputFiles = null;
  uploadinputFiles = document.getElementById("spaceData-button-selectfile").files;
  minList.value = [];
  nameList.value = [];
  let text = "";
  for (let i = 0; i < uploadinputFiles.length; i++) {
    text += uploadinputFiles[i].name + "\n";
    // 获取这个文件的后缀名
    minList.value.push(uploadinputFiles[i].name.slice(uploadinputFiles[i].name.length - 3, uploadinputFiles[i].name.length));
    nameList.value.push(uploadinputFiles[i].name.split(".")[0]);
  }
  textarea1.value = text;
}
function startUpload() {
  let uploadinput = document.getElementById("spaceData-button-selectfile");
  let uploadinputExcel = document.getElementById("excel-button-selectfile");
  // if (year.value == "") {
  //   alertMsg("请输入T年!");
  //   return;
  // }
  if (uploadinputExcel.value == "") {
    alertMsg("请先选择Excel文件!");
    return;
  }
  if (uploadinput.value == "") {
    alertMsg("请选择Shp文件!");
    return;
  }
  if (!judgeIsOnce(minList.value)) {
    alertMsg('上传数量限制:.dbf、.prj、.shp、.shx、.cpg文件各1个;.sbn、.sbx、.shp.xml文件至多一个。');
    return;
  } else if (!judgeName(nameList.value)) {
    alertMsg("文件名请保持一致！");
    return;
  }
  if (!judgeExcel(excelMinList.value)) {
    alertMsg('上传数量限制:.xls或.xlsx文件1个');
    return;
  }
  proxy.$modal.loading()
  const fileFormData = new FormData();
  // 因为要传一个文件数组过去，所以要循环append
  for (let i = 0; i < uploadinput.files.length; i++) {
    //fileFormData.append('file', uploadinput.files[i].raw)
    fileFormData.append('file', uploadinput.files[i]);
  }
  fileFormData.append('file', uploadinputExcel.files[0]);
  let fileIds = "";//上传附件id列表
  proxy.$modal.loading("正在导入，请稍等...");
  //上传文件到附件表
  upLoadFile(fileFormData).then(res => {
    if (res.code == 200) {
      let resultArr = res.data;
      for (let i = 0; i < resultArr.length - 1; i++) {
        if (i > 0) {
          fileIds += ",";
        }
        fileIds += resultArr[i].attachId;
      }
      let fileId = resultArr[resultArr.length - 1].attachId
      let formData = new FormData();
      formData.append('file', uploadinputExcel.files[0])
      formData.append('type', radio3.value)
      formData.append("ids", fileIds);
      formData.append("year", year.value)
      formData.append("excelFileId", fileId)
      importExcel(formData).then(res => {
        proxy.$modal.msgSuccess('导入成功');
        uploadButton.value = false
        textarea.value = ''
        textarea1.value = ''
        year.value = ''
        getAllData()
        proxy.$modal.closeLoading()
      }).catch(erro => {
        alertMsg(erro.message);
        proxy.$modal.closeLoading()
      })
    }
  }).catch( erro =>{
    proxy.$modal.closeLoading()
  })
}
const provinceData = ref([])
/** 获取省列表 */
function getProvinceData() {
  getProvince().then((response) => {
    if(roleLeve.value == 'qh_gj_role') {
      provinceData.value = response.data;
    }else{
      provinceData.value = response.data.filter(item => item.id == provinceId.value)
    }
  });
}
const cityData = ref([])
//选择省
function chooseProvince(value) {
  queryParams.value.province = value.name
  getChildArea(value.id).then(response => {
    if(roleLeve.value == 'qh_province_role' || roleLeve.value == 'qh_gj_role') {
      cityData.value = response.data;
    }else{
      cityData.value = response.data.filter(item => item.id == cityId.value)
    }
  });
}
const areaData = ref([])
//选择市
function chooseCity(value) {
  queryParams.value.city = value.name
  getChildArea(value.id).then((response) => {
    if(roleLeve.value == 'qh_province_role' || roleLeve.value == 'qh_gj_role' || roleLeve.value == 'qh_city_role') {
      areaData.value = response.data;
    }else{
      areaData.value = response.data.filter(item => item.id == countyId.value)
    }
  });
}
//选择区县
function chooseCounty(value) {
  queryParams.value.county = value.name
  // if (open.value) {//上传面板
  //   // queryParams1.value.dataRangeArea = value.name;
  // } else if (showHideQueryDivBool.value) {//查询面板
  //   pageSize.value.dataRangeArea = value.name;
  //   countyId.value = value.id
  // }
}
//警告消息
function alertMsg(msg) {
  proxy.$modal.msgWarning(msg);
}
const loading = ref(false);
const currentPage = ref(1);//当前页码
const pageSize = ref(10);//每页显示数据数量
const totalCount = ref(0);//总数据数量
//分页
const handleSizeChange = (val) => {
  // 改变每页显示的条数
  pageSize.value = val;
  // 注意：在改变每页显示的条数时，要将页码显示到第一页
  currentPage.value = 1;
  if(uploadPersonBool.value) {
    selectHistoryData()
  }else{
    selectTableData();
  }
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  if(uploadPersonBool.value) {
    selectHistoryData()
  }else{
    selectTableData();
  }
};
function selectHistoryData() {
  selectQueryParams.value.page = currentPage.value
  selectQueryParams.value.size = pageSize.value
  uploadRecords(selectQueryParams.value).then(res => {
    tableDataForm.value.tableData = res.data.rows
    totalCount.value = res.data.total
    uploadPersonBool.value = true
  }).catch(erro => {

  })
}
const dataType = ref(1)
function selectTableData() {
  queryParams.value.page = currentPage.value
  queryParams.value.size = pageSize.value
  page(queryParams.value).then(res => {
    tableDataForm.value.tableData = res.data.rows
    dataType.value = res.data.rows[0].dataType
    totalCount.value = res.data.total
    grIdListColumn.value = tableDataForm.value.tableData[0].grIdList.map((item, index) => {
        return {
          label: item.imValue,
          prop:'grIdListfimValue'+index
        }
      })
      tableDataForm.value.tableData.map(item=> {
        item.grIdList.map((iteml,index1)=>{
          item['grIdListfimValue'+index1]= iteml.fimValue
        })
      })
  }).catch(erro => {

  })
}
//校验Shp文件名称
function judgeName(list) {
  let name = list[0];
  let result = list.filter(function (item) {
    return item == name;
  })
  if (result.length == list.length) return true;
  else return false;
}
//校验Shp文件类型
function judgeIsOnce(list) {
  // ["dbf","prj","shp","shx","cpg"];
  let dbf = 0, prj = 0, shp = 0, shx = 0, cpg = 0, sbn = 0, sbx = 0, xml = 0;
  for (let i = 0; i < list.length; i++) {
    let item = list[i];
    if (item == 'dbf') dbf++;
    if (item == 'prj') prj++;
    if (item == 'shp') shp++;
    if (item == 'shx') shx++;
    if (item == 'cpg') cpg++;
    if (item == 'sbn') sbn++;
    if (item == 'sbx') sbx++;
    if (item == 'xml') xml++;
  }
  if (dbf == 1 && prj == 1 && shp == 1 && shx == 1 && cpg == 1 && sbn < 2 && sbx < 2 && xml < 2) return true;
  else return false;
}
//校验Excel文件类型
function judgeExcel(list) {
  let xls = 0, xlsx = 0;
  for (let i = 0; i < list.length; i++) {
    let item = list[i];
    if (item == 'xls') xls++;
    if (item == 'xlsx') xlsx++;
  }
  if (list.length == 1 && (xls == 1 && xlsx === 0) || (xls === 0 && xlsx == 1)) return true;
  else return false;
}
const roleLeve = ref('')
const provinceId = ref('')
const provinceName = ref('')
const cityId = ref('')
const cityName = ref('')
const countyId = ref('')
const countyName = ref('')
const geomText = ref('')
const open = ref(false)
function getAllData() {
  getByRegionId().then(res => {
    roleLeve.value = res.data.role
    provinceId.value = res.data.provinceId
    cityId.value = res.data.cityId
    countyId.value = res.data.countyId
    provinceName.value = res.data.provinceName
    cityName.value = res.data.cityName
    countyName.value = res.data.countyName
    geomText.value = res.data.geom
    open.value = true
    getProvinceData()
  })
}
onMounted(() => {
  getAllData()
});
</script>
<style scoped lang="scss">
// .mapDiv {
//   position: absolute;
//   top: 0px;
//   left: 0px;
//   width: 100%;
//   height: 80%;
// }

.new-uploadDiv {
  position: absolute;
  top: 30px;
  left: 30px;
}

.new-uploadDiv1 {
  position: absolute;
  top: 70px;
  left: 105px;
  width: 330px;
}
//查询面板
.new-queryDiv {
  position: absolute;
  top: 16px;
  left: 105px;
}

.new-queryDiv-inner {
  padding: 10px 0 0;
}
//下方查看详情面板
.new-queryResultDiv {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 10;
}
.new-queryTableBtn {
  // margin: 10px 0;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 50px;
  padding: 10px;
}

.new-queryTableDiv {
  margin: 3% 0 3% 0;
  height: 300px;
  // position: absolute;
  // left: 10px;
  // right: 10px;
  // top: 50px;
  // bottom: 50px;
}

.new-queryTableDiv-page {
  position: absolute;
  // left: 10px;
  right: 10px;
  bottom: 0px;
  height: 50px;
  padding: 8px;
}

.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
</style>